<!-- src/components/CityPicker.vue -->
<template>
  <div>
    <!-- 省选择 -->
    <el-select
      v-model="selectedProvince"
      placeholder="省份"
      clearable
      @change="handleProvinceChange"
    >
      <el-option
        v-for="province in provinceList"
        :key="province.name"
        :label="province.name"
        :value="province.name"
      />
    </el-select>

    <!-- 市选择（省份选择后才显示） -->
    <el-select
      v-if="cityList.length > 0"
      v-model="selectedCity"
      placeholder="城市"
      clearable
      @change="handleCityChange"
    >
      <el-option
        v-for="city in cityList"
        :key="city.name"
        :label="city.name"
        :value="city"
      />
    </el-select>

    <!-- 县选择（城市选择后才显示） -->
    <el-select
      v-if="areaList.length > 0"
      v-model="selectedArea"
      placeholder="区县"
      clearable
    >
      <el-option
        v-for="area in areaList"
        :key="area.id"
        :label="area.name"
        :value="area"
      />
    </el-select>
  </div>
</template>

<script>
import dataJson from './area.js' // 引入 area.js 数据

export default {
  name: 'CityPicker',
  data() {
    return {
      provinceList: dataJson, // 省份列表
      cityList: [], // 城市列表，根据省份动态加载
      areaList: [], // 区县列表，根据城市动态加载
      selectedProvince: null, // 选中的省份
      selectedCity: null, // 选中的城市
      selectedArea: null // 选中的区县
    }
  },
  methods: {
    // 省份改变时触发
    handleProvinceChange(province) {
      this.provinceList.forEach((item, index) => {
        if (item.name === province) {
          this.cityList = item.city || [] // 获取当前省份下的城市列表
        }
      })
      this.selectedCity = null // 清空已选城市
      this.areaList = [] // 清空已选区县
      this.selectedArea = null
    },
    // 城市改变时触发
    handleCityChange(city) {
      this.areaList = city.area || [] // 获取当前城市下的区县列表
      this.selectedArea = null // 清空已选区县
    }
  }
}
</script>

<style scoped>
.el-select {
  width: 31%;
  margin-right: 5px;
}
</style>
